<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS练习-盒子</title>
    <style>
        *{margin: 0;padding: 0;}
        .box {
            margin: 100px 50px;
            width: 248px;
            height: 557px;
        }
        h2 {
            font-weight: 400;
            border-bottom: 3px solid #fa5000;
        }
        li {
            list-style: none;
        }
        ul {
            display: inline-block;
        }
        .imag {
            width: 237px;
            height: 380px;
            background-image: url("img/cjxsj_20140910.jpg");
        }
        .smallBox {
            width: 237px;
            border-right: 1.5px solid #efefef;
            border-bottom: 1.5px solid #efefef;
        }
        .list {
            height: 128px;
        }
        ul {
            margin-left: 16px;
        }
        li {
            color: #7e7e7e;
            margin-top: 12px;
            font-size: 13px;
        }
        span {
            display: inline-block;
            color: #fff;
            text-indent: 0.2em;
            width: 40px;
            height: 30px;
            background-color: #323232;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>
            <span>9F</span>
            图书·童书
        </h2>
        <div class="smallBox">
            <div class="imag"></div>
            <div class="list">
                <ul>
                    <li>外语</li>
                    <li>童书</li>
                    <li>成功励志</li>
                    <li>历史</li>
                </ul>
                <ul>
                    <li>保健养生</li>
                    <li>小说</li>
                    <li>管理</li>
                    <li>哲学宗教</li>
                </ul>
                <ul class="last">
                    <li>亲子家教</li>
                    <li>文学</li>
                    <li>传记</li>
                    <li>青春文学</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>